<template>
	<view class="">
		<view class="top-wrapper">
			<view class="inset-group">
				<view class="cell-wrap">
					<view class="address-wrapper" style="justify-content: space-between;">
						<view class="address-info">
							<view>
								<text class="name" style="font-weight: bold;">请退货并填写物流信息</text>
							</view>
						</view>
					</view>
				</view>
				<uni-steps class="steps-wrapper" :options="list2" active-color="#db592a" active-icon="checkbox" :active="2" />
			</view>
		</view>
		<view class="time-wrapper">
			请在<text>{{time.day}}</text>天<text>{{time.hours}}</text>时<text>{{time.hours}}</text>分<text>{{time.seconds}}</text>内寄回商品
		</view>
		<view class="refund-status">
			<view class="title">
				商家地址
			</view>
			<view class="shop-info" v-if="orderDetail.asstatus_sku">
				<view>
					<text>收货人：{{orderDetail.asstatus_sku.aliRefundName}}</text> {{orderDetail.asstatus_sku.aliRefundPhone}}
				</view>
				<view>
					{{orderDetail.asstatus_sku.aliRefundLocal}}
				</view>
			</view>
			<view class="copy-btn"><text @click="copy">复制</text></view>
		</view>
		<view class="refund-status">
			<view class="title">
				退货信息填写
			</view>
			<view class="cell">
				<view>
					<text>物流单号</text>
				</view>
				<view>
					<input type="text" :value="refund_expnum" @input="refundExpnumChange" @blur="blurChange" placeholder="填写单号" />
				</view>
			</view>
			<view class="cell picker" v-if="isExpRe">
				<view>
					<text>物流公司</text>
				</view>
				<view>
					{{logistics.name?logistics.name:''}}
					<!-- <picker @change="bindPickerChange" mode="selector" range-key="name" :range="dictExpress">
						<view class="uni-input">{{selDictExpress}}</view>
					</picker> -->
				</view>
			</view>
			<view class="cell picker" @click="goSelDictExpress" v-if="showDictExpress">
				<view>
					<text>物流公司</text>
				</view>
				<view>
					{{logistics.name?logistics.name:'选择物流公司'}}
					<!-- <picker @change="bindPickerChange" mode="selector" range-key="name" :range="dictExpress">
						<view class="uni-input">{{selDictExpress}}</view>
					</picker> -->
				</view>
			</view>
		</view>
		<view class="btn">
			<button :disabled="disabled" color="linear-gradient(to right, #ff6034, #ee0a24)" @click="submit">
				提交
			</button>
		</view>
	</view>
</template>

<script>
	import api from "@/api/api.js"
	import util from "@/util/util.js"
	export default {
		data() {
			return {
				list2: [{
					title: '提交申请'
				}, {
					title: '商家处理'
				},{
					title: '寄回商品'
				},{
					title: '商家退款'
				},{
					title: '退款成功'
				}],
				steps2: [
				    {
				      text: '提交申请',
				      desc: '',
				      inactiveIcon: 'location-o',
				      activeIcon: 'success',
				    },
				    {
				     text: '商家处理',
				     desc: '',
				      inactiveIcon: 'like-o',
				      activeIcon: 'plus',
				    },
					{
					 text: '寄回商品',
					 desc: '',
					  inactiveIcon: 'like-o',
					  activeIcon: 'plus',
					},
					{
					 text: '商家退款',
					 desc: '',
					  inactiveIcon: 'like-o',
					  activeIcon: 'plus',
					},
					{
					 text: '退款成功',
					 desc: '',
					  inactiveIcon: 'like-o',
					  activeIcon: 'plus',
					}
				],
				// index:null,
				// dictExpress:[],
				// selDictExpress:"请选择",
				orderDetail:{},
				aliResult:{},
				refund_expnum:"",
				flag:true,
				logistics:{},
				timer:null,
				time:{
					day:"00",
					hours:"00",
					minutes:"00",
					seconds:"00"
				},
				isExpRe:false,
				showDictExpress:false
			}
		},
		async onLoad(options) {
			await this.$onLaunched;	
			// this.getDictExpress();
			this.init(options.order_id)
		},
		onShow() {
			uni.$on('updateData',(data)=>{
				this.logistics = data;
				this.flag = false;
			})
		},
		computed:{
			disabled(){
				// console.log(this.refund_expnum==""&&this.logistics.engname==""&&!this.flag)
				return this.flag
			}
		},
		destroyed(){
			clearInterval(this.timer);
		},
		methods: {
			initTime(){
				// if(this.orderDetail.status=="待付款"){
					this.timer = setInterval(()=>{
						let create_time = new   Date(Date.parse(this.orderDetail.asstatus_sku.lastUpdate.replace(/-/g,   "/")))
						let time = (7*24*60*60*1000)-(new Date().getTime()-create_time.getTime());
						if(time>0){
							this.time = this.timeConversion(time)
						}else{
							clearInterval(this.timer);
						}
					},1000)
				// }
			},
			timeConversion(duration) {	
				var milliseconds = parseInt((duration%1000)/100)
			        , seconds = parseInt((duration/1000)%60)
			        , minutes = parseInt((duration/(1000*60))%60)
			        , hours = parseInt((duration/(1000*60*60))%24)
					, day = parseInt((duration/(1000*60*60))/24);
			
				day = (day < 10) ? "0" + day : day;
			    hours = (hours < 10) ? "0" + hours : hours;
			    minutes = (minutes < 10) ? "0" + minutes : minutes;
			    seconds = (seconds < 10) ? "0" + seconds : seconds;
			    return {
					day,
					hours,
					minutes,
					seconds
				};
			},
			refundExpnumChange(e){
				this.flag = true;
				this.refund_expnum = e.detail.value
			},
			blurChange(e){
				if(e.detail.value){
					uni.showLoading({
						title:"订单号识别中..."
					})
					api.expRe({
						expnum:e.detail.value
					}).then((res)=>{
						if(res.status==0){
							if(res.data.exp_company){
								this.logistics.engname = res.data.exp_company.comCode.toUpperCase();
								this.logistics.name = res.data.exp_company.name
								this.isExpRe = true;
								this.showDictExpress = false;
								this.flag = false;
							}else{
								this.expReError()
							}
						}else{
							this.expReError()
						}
						uni.hideLoading()
					}).catch((err)=>{
						this.expReError()
						uni.hideLoading()
					})
				}				
			},
			expReError(){
				this.showDictExpress = true;
				this.isExpRe = false;
				this.logistics.engname = ""
				this.logistics.name = ""
				this.flag = true;
				uni.showToast({
					icon:"none",
					title:"识别失败，请选择物流公司"
				})
			},
			init(orederId){
				if(orederId){
					this.getDetail(orederId)
				}else{
					uni.showToast({
						icon:"none",
						title:"该订单不支持售后！"
					})
				}
			},
			getDetail(orderId){
				uni.showLoading()
				api.getOrderDetail({
					order_id:orderId+""
				}).then((res)=>{
					if(res.status==0){
						this.orderDetail = res.data.order;
						if(this.orderDetail.asstatus_id==102||(this.orderDetail.asstatus_id==500&&this.orderDetail.asstatus_sku.isEditExp == 'y')){
							const {aliResult} = this.orderDetail.asstatus_sku;
							this.aliResult = JSON.parse(aliResult)
							this.initTime();
						}else{
							uni.showToast({
								icon:"none",
								title:"没有要寄回的商品！",
								success: () => {
									// uni.redirectTo({
									// 	url:"../user-center/user-center"
									// })
								}
							})
						}
					}
					uni.hideLoading()
				})
			},
			submit(){
				if(this.refund_expnum&&this.logistics.engname){
					if(util.checkExpNum(this.refund_expnum)){
						uni.showLoading()
						api.orderRefundExp({
							order_id:this.orderDetail.order_id+'',
							refund_expengname:this.logistics.engname,
							refund_expnum:this.refund_expnum
						}).then(res=>{
							this.flag=true;
							uni.showToast({
								icon:"none",
								title:"提交成功，等待商家处理！",
								success: () => {
									
									this.$uniGo('redirectTo',{
										url:"../order/order-detail?orderid="+this.orderDetail.order_id
									})
									
									// uni.redirectTo({
									// 	url:"../order/order-detail?orderid="+this.orderDetail.order_id
									// })
								}
							})
							uni.hideLoading();
						}).catch((err)=>{
							this.flag = true
							uni.hideLoading();							
						})
					}else{
						uni.showToast({
							icon:"none",
							title:"订单号有误！",
							success: () => {
								this.flag=true
							}
						})
					}					
				}else{
					uni.showToast({
						icon:"none",
						title:"请完善退货信息！",
						success: () => {
							this.flag=true
						}
					})
				}
			},
			// bindPickerChange(e){
			// 	this.index = e.detail.value
			// 	this.selDictExpress = this.dictExpress[this.index].name
			// },
			goSelDictExpress(){
				console.log("选择物流公司")
				uni.navigateTo({
					url:"../order/dictExpress"
				})
			},
			copy(){
				wx.setClipboardData({
				  data: '收货人:'+this.orderDetail.asstatus_sku.aliRefundName+"-"+this.orderDetail.asstatus_sku.aliRefundPhone+"/"+this.orderDetail.asstatus_sku.aliRefundLocal,
				  success (res) {
				    uni.showToast({
				    	title:"复制成功"
				    })
				  }
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.time-wrapper{
		text-align: center;
		line-height: 3;
		text{
			width: 40rpx;
			height: 40rpx;
			display: inline-block;
			text-align: center;
			line-height: 40rpx;
			// box-shadow: 1rpx 1rpx 3rpx rgba(0, 0, 0, .4);
			border-radius: 4rpx;
			margin: 0 6rpx;
			color: #db592a;
		}
	}
	.cell-wrap{
		padding: 20rpx 30rpx;
	}
	.steps-wrapper{
		margin: 60rpx 0 30px;
	}
	.top-wrapper{
		padding: 30rpx 30rpx 1rpx;
		// background: linear-gradient(to right, #fa7f3f, #fb3a28);
		background: $theme-color;
		.order-status{
			color: #fff;
			text-align: center;
			font-size: 36rpx;
			padding-bottom: 30rpx;
			text{
				display: block;
				font-size: 28rpx;
				// line-height: 2;
			}
		}
	}
	.btn-group{
		text-align: right;
		van-button{
			margin-right:20rpx;
		}
	}
	.address-wrapper{
		display: flex;
		align-items: center;
		image{
			width: 80rpx;
			min-width: 80rpx;
			max-width: 80rpx;
			height: 80rpx;
			margin-right: 20rpx;
		}
		.address-info{
			font-size: 24rpx;
			flex: 1;
			.name{
				font-size: 30rpx;
				// font-weight: bold;
				margin-right: 15rpx;
				margin-bottom: 10rpx;				
			}
			.phone{
				color: #aeaeae;
				
			}
			.desc{
				line-height: 1.5;
			}
			::v-deep .van-button{
				height: 20px;
			}
		}
	}
	.goods-info{
		font-size: 28rpx;
		margin-top: 20rpx;
		background: #fff;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
		.title{
			margin: 10rpx 30rpx 30rpx;
			font-weight: bold;
		}
		.top-desc{
			display: flex;
			justify-content:end;
			margin: 20rpx 30rpx;
			image{
				width: 180rpx;
				min-width: 180rpx;
				max-width: 180rpx;
				height: 180rpx;
				border-radius: 10rpx;
			}
			.center-desc{
				margin: 0 50rpx 0 30rpx;
				.title{
					display: block;
					height: 80rpx;
					line-height: 40rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
					margin-left:0 ;
				}
				.tag{
					display: block;
					margin: 10rpx 0;
					color: #B7BDC6;
				}
			}
			.right-desc{
				text-align: right;
				.num{
					font-size: 24rpx;
					color: #969799;
				}
			}
		}
		.bottom-info{
			margin: 20rpx 30rpx;
			.item{
				justify-content:space-between;
				line-height: 60rpx;
				font-size: 24rpx;
				position: relative;
				text{
					margin-right: 30rpx;
					color: #aeaeae;
				}
				.copy{
					// position: absolute;
					// right: 30rpx;
					color: #db592a;
				}
			}
		}
	}
	.order-info{
		background: #fff;
		padding-bottom: 120rpx;
		margin-top: 20rpx;
		.title{
			font-size: 32rpx;
			padding: 30rpx 30rpx;
			border-bottom: 1rpx #eee solid;
			position: relative;
			&::after{
				content: "";
				position: absolute;
				top: 38rpx;
				left: 20rpx;
				width: 5rpx;
				height: calc(100% - 70rpx);
				background: #ff4c02;
				border-radius: 5rpx;
			}
		}
		.order-beizhu{
			display: flex;
			text{
				width: 22%;
				min-width: 22%;
				max-width: 22%;
			}
			view{
				font-size: 24rpx;
			}
		}
		.kefu{
			text-align: center;
			font-size: 40rpx;
			// font-weight: bold;
			border-top: 1rpx #eee solid;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 30rpx 0;
			color: #0070ff;
		}
	}
	.red-pkg{
		padding: 0 20rpx;
		image{
			width: 100%;
			height: auto;			
		}
	}
	.btn{
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 20rpx 50rpx;
		background: #fff;
		box-sizing: border-box;
		button{
			background-color: $theme-color;
			color: #fff;
			border-radius: 100rpx;
		}
	}
	.refund-status{
		background: #fff;
		margin-top: 20rpx;
		padding: 30rpx;
		.refund-close,
		.title{
			font-size: 30rpx;
			font-weight: bold;
		}
		.copy-btn{
			text-align: right;
			font-size: 25rpx;
			color: #db592a;
		}
		.shop-info{
			font-size: 25rpx;
			color: #B7BDC6;
			padding: 20rpx 30rpx;
			view{
				margin: 15rpx 0;
				&:last-of-type{
					margin-top: 30rpx;
				}
			}
			text{
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
				margin-right: 20rpx;
			}
		}
		.cell{
			display: flex;
			justify-content: space-between;
			margin:20rpx 0;
			align-items: center;			
			input{
				text-align: right;
				font-size: 25rpx;
			}
		}
		.cell.picker{
			position: relative;
			padding-right: 40rpx;
			&::before{
				content: "";
				width: 20rpx;
				height: 20rpx;
				border: 1rpx #909399 solid;
				position: absolute;
				right: 0;
				transform: rotate(45deg);
				border-left: none;
				border-bottom: none;
			}
		}
		.refund-success{
			.title{
				display: flex;
				justify-content: space-between;
				font-weight: bold;
				text{
					color: #db592a;
				}
			}
			.desc{
				font-size: 24rpx;
				line-height: 2;
				margin-top: 20rpx;
				text{
					display: block;
					font-size: 22rpx;
					color: #aeaeae;
				}
			}
		}
	}
	
</style>
